<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core_1_1" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<title>后台管理——添加视频</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<link href="${ctx}/css/back/css.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="${ctx}/js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
	<link href="${ctx}/js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${ctx }/js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="${ctx }/js/jquery-migrate-1.2.1.js"></script>
	<script src="${ctx}/js/ligerUI/js/core/base.js" type="text/javascript"></script>
	<script src="${ctx}/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script> 
	<script src="${ctx}/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
	<script src="${ctx}/js/ligerUI/js/plugins/ligerResizable.jss" type="text/javascript"></script>
	<link href="${ctx}/css/pager.css" type="text/css" rel="stylesheet" />
	<%--<script type="text/javascript">--%>
	 <%--$(function(){--%>
	    	<%--/** 部门表单提交 */--%>
			<%--$("#deptForm").submit(function(){--%>
				<%--var name = $("#name");--%>
				<%--var remark = $("#remark");--%>
				<%--var msg = "";--%>
				<%--if ($.trim(name.val()) == ""){--%>
					<%--msg = "部门名称不能为空！";--%>
					<%--name.focus();--%>
				<%--}else if ($.trim(remark.val()) == ""){--%>
					<%--msg = "详细描述不能为空！";--%>
					<%--remark.focus();--%>
				<%--}--%>
				<%--if (msg != ""){--%>
					<%--$.ligerDialog.error(msg);--%>
					<%--return false;--%>
				<%--}else{--%>
					<%--return true;--%>
				<%--}--%>
				<%--$("#deptForm").submit();--%>
			<%--});--%>
	    <%--});--%>
		<%----%>

	<%--</script>--%>
		<script type="text/javascript">
			function onOrgChange() {
			    $("#lesson_id").empty();
                $("#lesson_id").append("<option value="+""+">"+"--请选择章节--"+"</option>")
			    var option = $("#course_id option:selected")
				var course_id = option.val();
			    $.ajax({
					url:"/getLesson",
					dataType:"json",
					type:"post",
					contentType:"application/json;charset=utf-8",
					data:JSON.stringify({'id':course_id}),
					success:function (data) {
						var dataObj = eval(data)
						var sele = $("#lesson_id")
						if (dataObj.msg!=null){
						    alert(dataObj.msg)
						}
						for (var i=0;i<dataObj.lesson.lessons.length;i++){
						    sele.append("<option value="+dataObj.lesson.lessons[i].id+">"+dataObj.lesson.lessons[i].name+"</option>")
						}
                    }
				});
            }

            function check() {
				var course = document.getElementById("course_id");
				var lesson = document.getElementById("lesson_id");
				var count = document.getElementById("video").value;
				$(".del").remove()
				if (course.value=="" || lesson.value==""){
				    alert("请先选择课程和章节")
					window.location.reload(true)
				}else{
				    for (i=0;i<count;i++) {
                        $("#tb1").append("<tr class='del'><td class='font3 fftd'>视频名称：" +
							"<input name='name' type='text' id='"+"vname"+i+"'>视频文件：<input type='file' name='file' accept='video/*' id='"+"file"+i+"' onchange='uploadFile("+i+")'>" +
							"      <span id='msg"+i+"' style='color: red'></span></td></tr>");
                    }
				}
            }
            
            function uploadFile(id) {
			    document.getElementById("msg"+id).innerHTML="正在上传..."
				var formdata = new FormData();
			    var ccc = $("#lesson_id option:selected").val();
			    var qqq = $("#course_id option:selected").val();
				formdata.append("myfile",document.getElementById("file"+id).files[0]);
				formdata.append("videoname",document.getElementById("vname"+id).value);
				formdata.append("lesson_id",ccc);
				formdata.append("course_id",qqq);
				$.ajax({
					url:"/uploadVideo",
					type:"post",
                    data: formdata,
                    contentType: false,
                    processData: false,
					success:function (data) {
					    console.log(data)
                        if (data.infos == "success") {
                            document.getElementById("msg"+id).innerHTML="上传成功!"
                        }
                    }
				});
            }
		</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr><td height="10"></td></tr>
  <tr>
    <td width="15" height="32"><img src="${ctx}/images/main_locleft.gif" width="15" height="32"></td>
	<td class="main_locbg font2"><img src="${ctx}/images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：课程管理  &gt; 添加视频</td>
	<td width="15" height="32"><img src="${ctx}/images/main_locright.gif" width="15" height="32"></td>
  </tr>
</table>
<table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
  <tr valign="top">
    <td>
    	 <form action="/doAddVideo" id="deptForm" method="post" enctype="multipart/form-data">
    	 	<!-- 隐藏表单，flag表示添加标记 -->
    	 	<input type="hidden" name="flag" value="2">
		  <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
		    <tr><td class="font3 fftd">
		    	<table id="tb1">
					<tr>
						<td class="font3 fftd">
							选择课程：
							<select name="course_id" id="course_id" style="width:143px;" onchange="onOrgChange()">
								<option>--请选择课程--</option>
								<c:forEach items="${courses}" var="course">
									<option value="${course.id}">${course.name}</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr id="tr1">
						<td class="font3 fftd">选择章节：
							<select name="lesson_id" id="lesson_id" style="width:143px;">
							</select>
							选择视频数量：
							<select name="video" id="video" style="width:50px;" onchange="check()">
								<%for (int i=0;i<=10;i++){%>
								<option value="<%=i%>"><%=i%></option>
								<%}%>
							</select>
						</td>
					</tr>

		    	</table>
		    </td></tr>
			<tr><td class="main_tdbor"></td></tr>
			
			<tr><td align="left" class="fftd"><input type="submit" value="添加 ">&nbsp;&nbsp;<input type="reset" value="取消 "></td></tr>
		  </table>
		 </form>
	</td>
  </tr>
</table>
<div style="height:10px;"></div>
</body>
</html>